<template>
  <div>
    <h2><span class="s1" @click="goBack()"> <van-icon name="arrow-left" /> </span>详细地址</h2>
    <van-cell-group>
      <van-field v-model="province" label="省" required clearable placeholder="请输入你要邮寄的省份" />
      <van-field v-model="city" label="市" required clearable placeholder="请输入你要邮寄的市"/>
      <van-field v-model="district" label="区" required clearable placeholder="请输入你要邮寄的区"/>
      <van-field v-model="address" label="详细地址" required clearable placeholder="一定要详细哦"/>
    </van-cell-group>
    <van-button type="primary" @click="saveAddress" class="save-button">保存</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      province: '',
      city: '',
      district: '',
      address: '',
    };
  },
  mounted() {
    // 从本地存储中获取地址信息
    const savedAddressData = localStorage.getItem('addressData');
    
    if (savedAddressData) {
      // 将保存的字符串解析为对象
      const addressData = JSON.parse(savedAddressData);
      
      // 更新组件的地址信息
      this.province = addressData.province;
      this.city = addressData.city;
      this.district = addressData.district;
      this.address = addressData.address;
    }
  },
  methods: {
    goBack(){
       this.$router.back(-1);
    },    
    saveAddress() {
      const addressData = {
        province: this.province,
        city: this.city,
        district: this.district,
        address: this.address,
      };
      
      // 将地址信息转换为字符串，并保存到浏览器的本地存储中
      localStorage.setItem('addressData', JSON.stringify(addressData));
      
      // 保存成功后的提示或跳转逻辑
      alert('地址保存成功！');
      // this.$router.push('/AddressPage');
      this.$router.go(-1);

    }
  }
};
</script>

<style scoped>
h2 {
  text-align: center;
}

.save-button {
  width: 100%;
  margin-top: 100px;
  
}
.s1 {
  position: absolute;
  left: 10px;
}
h2 {
  text-align: center;
  padding: 20px;
  position: relative;
  background: #fff;
}
</style>